<template>
  <div class="childfunc-control">
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      :height="gridHeight"
      size="mini"
      header-align="center"
      :loading="loading"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
        showInsertStatus: false,
      }"
      :data="gridData"
    >
      <je-column field="name" title="名称"></je-column>
      <je-column field="editable" title="编辑" width="50" align="center">
        <template #default="{ row }">
          <je-switch v-model:value="row.editable" mode="checkbox" />
        </template>
      </je-column>
      <je-column field="hidden" title="隐藏" width="50" align="center">
        <template #default="{ row }">
          <je-switch v-model:value="row.hidden" mode="checkbox" :disabled="row.display == '1'" />
        </template>
      </je-column>
      <je-column field="display" title="显示" width="50" align="center">
        <template #default="{ row }">
          <je-switch v-model:value="row.display" mode="checkbox" :disabled="row.hidden == '1'" />
        </template>
      </je-column>
    </je-grid>
  </div>
</template>

<script>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { Grid, Modal, Switch } from '@jecloud/ui';
  import { getData } from '@/api/index';
  import { encode, isEmpty, isNotEmpty } from '@jecloud/utils';

  export default defineComponent({
    name: 'ChildfuncControl',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeSwitch: Switch,
    },
    props: {
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      taskChildFunc: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
    },
    emits: ['setConfigData'],
    setup(props, { emit }) {
      const grid = ref(null);
      const gridData = ref([]);
      const loading = ref(true);
      const gridHeight = ref(0);

      onMounted(() => {
        getChildFuncs();
      });

      //选择的功能发生变化需要刷新列表数据
      watch(
        () => props.funcInfo.funcId,
        () => {
          getChildFuncs();
        },
      );

      //初始化按钮数据
      const getChildFuncs = () => {
        const funcId = props.funcInfo.funcId;
        if (isEmpty(funcId)) {
          loading.value = false;
          gridData.value = [];
          gridHeight.value = 0;
          return false;
        }
        const params = {
          tableCode: 'JE_CORE_FUNCRELATION',
          j_query: encode({
            custom: [
              {
                code: 'FUNCRELATION_FUNCINFO_ID ',
                type: '=',
                value: funcId,
                cn: 'and',
              },
            ],
            order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
          }),
          limit: '-1',
        };
        getData(params, { pd: 'meta' })
          .then((data) => {
            const datas = [];
            //数据处理
            data.rows.forEach((item) => {
              let editable = '0',
                hidden = '0',
                display = '0';
              if (isNotEmpty(props.taskChildFunc) && props.taskChildFunc[item.FUNCRELATION_CODE]) {
                const obj = props.taskChildFunc[item.FUNCRELATION_CODE];
                editable = obj.editable;
                hidden = obj.hidden;
                display = obj.display;
              }
              datas.push({
                name: item.FUNCRELATION_NAME,
                code: item.FUNCRELATION_CODE,
                editable,
                hidden,
                display,
              });
            });
            gridData.value = datas;
            if (datas.length > 0) {
              gridHeight.value = datas.length * 32 + 32;
            }
            loading.value = false;
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      //监听列表数据
      watch(
        () => gridData.value,
        (newVal) => {
          const datas = {};
          newVal.forEach((item) => {
            for (let key in item) {
              if (item[key] == true) {
                datas[item.code] = {
                  editable: item.editable || '0',
                  hidden: item.hidden || '0',
                  display: item.display || '0',
                };
                break;
              }
            }
          });
          emit('setConfigData', { type: 'taskChildFunc', datas });
        },
        { deep: true },
      );

      //监听节点ID变化回显表格的值
      watch(
        () => props.nodeId,
        () => {
          gridData.value.forEach((item) => {
            if (props.taskChildFunc[item.code]) {
              item.editable = props.taskChildFunc[item.code].editable;
              item.hidden = props.taskChildFunc[item.code].hidden;
              item.display = props.taskChildFunc[item.code].display;
            } else {
              item.editable = '0';
              item.hidden = '0';
              item.display = '0';
            }
          });
          grid.value.loadData(gridData.value);
        },
      );

      return { gridData, loading, grid, gridHeight };
    },
  });
</script>

<style lang="less" scoped></style>
